<template>
	<div>
		<view class="map-container">
			<view class="header">
				<view class="header-left" @tap="goBack">
					<image src="../../static/public/left_arrow.png" mode="heightFix"></image>
				</view>
				<view class="header-title">地图发布</view>
				<view class="header-right">
					<image src="../../static/public/dot.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="requirement" style="margin-top: 3.5vh;position: relative;">
				<view class="content">
					<u--textarea :placeholder="contentPlaceholder" maxlength="1500" height="150" count border="none"
						v-model="submit.content"></u--textarea>
				</view>
				<view v-show="false" style="position: absolute; bottom: 1vw;">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="4" width="80" height="80"></u-upload>
				</view>
			</view>
			<view class="requirement">
				<view class="requirement-body">
					<view class="title">
						<image src="@/static/home/publish/point.png" alt="圆点" class="point"/> 选择分类
					</view>
					<view class="requirement-content">
						<view>
							<span @click="classify.show = true;" class="requirement-content-span">
								<span>{{classify.select == null ?"请选择":classify.select}}</span>
							</span>
							<u-action-sheet :actions="classify.list" @select="classifySelect" :show="classify.show"
								@close="classify.show = false;"></u-action-sheet>
						</view>
					</view>
				</view>
			</view>
			
			<view class="requirement" v-show="classify.select==='房屋租赁'">
				<view class="nav">房屋信息</view>
				<view class="requirement-body">
					<view class="title">
						<image src="@/static/home/publish/point.png" alt="圆点" class="point" /> 房屋类型
					</view>
					<view class="requirement-content">
						<view>
							<span @click="homeType.show = true" class="requirement-content-span">
								<span>{{homeType.select == null ?"请选择":homeType.select}}</span>
							</span>
							<u-action-sheet :actions="homeType.list" @select="homeTypeSelect" :show="homeType.show"
								@close="homeType.show = false"></u-action-sheet>
						</view>
					</view>
				</view>

				<view class="requirement-body">
					<view class="title">
						<image src="@/static/home/publish/point.png" alt="圆点" class="point" /> 地址
					</view>
					<view class="requirement-content">
						<view>
							<span @click="getAddress()" class="requirement-content-span">
								<span>{{address.name == "" ? "请选择":address.name}}</span>
							</span>
						</view>
					</view>
				</view>

				<view class="requirement-body">
					<view class="title">
						<image src="@/static/home/publish/point.png" alt="圆点" class="point" /> 详细地址
					</view>
					<view class="requirement-content">
						<view>
							<span class="requirement-content-span">
								<input placeholder-class="input-placeholder" type="text" placeholder="请输入">
							</span>
						</view>
					</view>
				</view>

				<view class="requirement-body">
					<view class="title">
						<image src="@/static/home/publish/point.png" alt="圆点" class="point" /> 楼层总楼层
					</view>
					<view class="requirement-content">
						<view>
							<span @click="floorsShow" class="requirement-content-span">
								<span>{{floors.column == null ? "请选择" : floors.column}}</span>
							</span>
							<u-picker :defaultIndex="floors.defaultIndex" :show="floors.show" :columns="floors.columns"
								keyName="name" @cancel="floors.show=false" @change="floorsChange"
								@confirm="floors.show=false" :closeOnClickOverlay="true"
								@close="floors.show = false"></u-picker>
						</view>
					</view>
				</view>

				<view class="requirement-body">
					<view class="title">
						<image src="@/static/home/publish/point.png" alt="圆点" class="point" /> 房屋面积
					</view>
					<view class="requirement-content">
						<view>
							<span class="requirement-content-span">
								<input placeholder-class="input-placeholder" type="text" placeholder="请输入 m²">
							</span>
						</view>
					</view>
				</view>

				<view class="requirement-body">
					<view class="title">
						<image src="@/static/home/publish/point.png" alt="圆点" class="point" /> 户型
					</view>
					<view class="requirement-content">
						<view>
							<span @click="houseTypeShow" class="requirement-content-span">
								<span>{{houseType.column == null ? "请选择" : houseType.column}}</span>
							</span>
							<u-picker :defaultIndex="houseType.defaultIndex" :show="houseType.show"
								:columns="houseType.columns" keyName="name" @cancel="houseType.show=false"
								@change="houseTypeChange" @confirm="houseType.show=false" :closeOnClickOverlay="true"
								@close="houseType.show = false"></u-picker>
						</view>
					</view>
				</view>
				
				<view class="requirement-body" style="border-bottom: none;">
					<view class="title">
						<image src="@/static/home/publish/point.png" alt="圆点" class="point" /> 房源标签
					</view>
					<view class="requirement-content">
						<view>
							<span class="requirement-content-span">
								丰富信息，可以更快的找到租户
							</span>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</div>
</template>

<script>
	import {
		rear
	} from '@/config/api.js';
	export default {
		data() {
			return {
				submit: {
					content: "",
				},
				floors: {
					show: false,
					columns: [
						[],
						[]
					],
					column: null,
					defaultIndex: [0, 0],
				},
				houseType: {
					show: false,
					columns: [
						[],
						[],
						[],
					],
					column: null,
					defaultIndex: [0, 0, 0],
				},
				classify: {
					show: false,
					select: '房屋租赁',
					list: [{
							name: '房屋租赁'
						},
						{
							name: '招聘'
						}
					]
				},
				address: {
					name: "",
					latitude: "",
					longitude: ""
				},
				homeType: {
					show: false,
					select: '请选择',
					list: [{
						name: '整租'
					}, {
						name: '单间'
					}, {
						name: '商铺'
					}, {
						name: '写字楼'
					}, {
						name: '自建房'
					}]
				},
				fileList1: [],
				contentPlaceholder: "请详细描述您的房屋租赁信息"
			};
		},
		onShow() {
			this.floors.columns[0] = Array.from({
				length: 99
			}, (_, i) => (`${i + 1}层`));
			this.floors.columns[1] = Array.from({
				length: 99
			}, (_, i) => (`共${i + 1}层`));
			this.houseType.columns[0] = Array.from({
				length: 20
			}, (_, i) => (`${i + 1}室`));
			this.houseType.columns[1] = Array.from({
				length: 10
			}, (_, i) => (`${i}厅`));
			this.houseType.columns[2] = Array.from({
				length: 10
			}, (_, i) => (`${i}卫`));
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			classifySelect(item) {
				this.classify.select = item.name;
				this.contentPlaceholder=`请详细描述您的${item.name}信息`
				this.classify.show = false
			},
			homeTypeSelect(item) {
				this.homeType.select = item.name;
				this.homeType.show = false
			},
			getAddress() {
				uni.chooseLocation({
					success: res => {
						this.address = res;
						uni.request({
							url: "https://restapi.amap.com/v3/geocode/regeo",
							method: "GET",
							data: {
								output: "json",
								location: this.address.longitude + "," + this.address.latitude,
								key: "29fba64b6474d5732699b53c09a3129e"
							},
							success: (res) => {
								const addressComponent = res.data.regeocode.addressComponent

								this.submit.city = (addressComponent.country + addressComponent
									.province +
									addressComponent.city + addressComponent.district +
									addressComponent
									.township +
									addressComponent.streetNumber.street);
							},
							fail: error => {
								console.error('请求失败：', error);
							}
						})
					}
				});
			},
			floorsShow() {
				this.floors.show = true;
			},
			floorsChange(e) {
				let {
					columnIndex,
					value
				} = e;
				let floorIndex = this.floors.columns[0].indexOf(value[0]);
				let totalFloorsIndex = this.floors.columns[1].indexOf(value[1]);
				if (floorIndex > totalFloorsIndex) {
					totalFloorsIndex = floorIndex;
				}
				this.floors.defaultIndex = [floorIndex, totalFloorsIndex];
				this.floors.column = `${this.floors.columns[0][floorIndex]} ${this.floors.columns[1][totalFloorsIndex]}`;
			},
			houseTypeShow() {
				this.houseType.show = true;
			},
			houseTypeChange(e) {
				let {
					columnIndex,
					value
				} = e;
				let houseTypeIndex = this.houseType.columns[0].indexOf(value[0]);
				let middleIndex = this.houseType.columns[1].indexOf(value[1]);
				let endIndex = this.houseType.columns[2].indexOf(value[2]);
				this.houseType.defaultIndex = [houseTypeIndex, middleIndex, endIndex];
				this.houseType.column =
					`${this.houseType.columns[0][houseTypeIndex]} ${this.houseType.columns[1][middleIndex]} ${this.houseType.columns[2][endIndex]}`;
			},
			afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					uni.uploadFile({
						url: rear + '/file/upload', // 替换为你的上传接口
						filePath: lists[i].url,
						name: 'file',
						success: (res) => {
							let item = this[`fileList${event.name}`][fileListLen]
							this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
								status: 'success',
								url: "https://item-kf.oss-cn-hangzhou.aliyuncs.com/" + JSON.parse(
									res.data).data,
								file: JSON.parse(res.data).data
							}))
							fileListLen++
						}
					})
				}
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.map-container {
		background-color: #FCFBFA;
		width: 90vw;
		padding: 0 5vw;
		height: 100%;
	}

	.point {
		width: 0.3em;
		height: 0.3em;
		vertical-align: 0.2em;
		margin-right: 0.3em;
	}

	.header {
		display: flex;
		position: sticky;
		align-items: center;
		padding: 1vh 1.5vh;
		background-color: #ffffff;
		top: 5vw;
		padding-top: 2vh;
		z-index: 10000;
		border-bottom: 1px solid #e5e5e5;

		.header-left,
		.header-right {
			width: 2.5vh;

			image {
				height: 1.4vh;
			}
		}

		.header-right {
			image {
				width: 2vh;
			}
		}

		.header-title {
			flex: 1;
			text-align: center;
			font-size: 2vh;
			font-weight: bold;
		}
	}

	.requirement {
		.nav {
			width: 83vw;
			border-bottom: 0.2pt solid #D1D1D1;
			font-size: 4vw;
			padding: 1vw;
			font-weight: bold;
			margin-bottom: 1vw;
		}

		margin-top: 1vh;
		background-color: white;
		padding: 3vw;
		border-radius: 2vw;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

		.requirement-body {
			border-bottom: 0.2pt solid #D1D1D1;
			margin-bottom: 1vw;

			.title {
				font-weight: 500;
				margin-bottom: 1vw;
			}

			.requirement-content {
				font-size: 3.5vw;
				margin-left: 4vw;
				margin-bottom: 1vw;
				color: #9B9BAB;

				.input-placeholder {
					font-size: 3.5vw;
					color: #9B9BAB;
				}

				.requirement-content-span {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.right_arrow {
		height: 1em;
		margin: 0 1vw;
	}
</style>